<template>
	<div>
		<div class="f-between">
			<p class="title-label">{{ title }}</p>
			<div class="flex align-center gap-20">
				<DateBetween v-model="searchKey" valueFormat="YYYY-MM-DD HH:mm:ss" placeholder="日期" @change="getInitData"></DateBetween>
				<el-button type="primary" @click="handleExport">导出工单信息</el-button>
			</div>
		</div>
		<ApldTable v-bind="{...tableConfig,...$attrs}" :data="tableData">
			<template v-slot:header="{ column }">
				<div v-if="column.property == 'area'">
					<p class="right">类型</p>
					<p class="left">{{ column.label }}</p>
				</div>
				<span v-else> {{ column.label }}</span>
			</template>
		</ApldTable>
	</div>
</template>

<script setup lang="ts">
import DateBetween from '@/views/aplid/DateBetween/index.vue'
import apiMod from '@/apiMod/index'
import { ApldTable } from '@/components/AplidCrud'
import { exportExcel } from './export.js'
const props = defineProps<{
	title?: string
	api?: string
	tableConfig: any
  paramsObj?:any
  
}>()

const emit = defineEmits(['cell-change'])
const searchKey = ref('')
const tableData = ref([])
const getInitData = () => {
	if (!props.api) return
	apiMod[props.api]({
    ...props.paramsObj,
		createTimeBetween: searchKey.value,
	}).then((res) => {
		if (!res.data) return
		tableData.value = res.data.map((item) => {
      if(item.satisfactionCount && item.count) {
        item.pice =item.satisfactionCount==0||item.count==0?0: (item.satisfactionCount/item.count*100).toFixed(2)
      }else {
        item.pice = 0
      }
			return {
				...item,
				area: item.districtName||item.organizationName,
			}
		})
	})
}


const handleExport = () => {
	const headerColumn = props.tableConfig.columns.map((item) => {
		return {
			m: item.label,
			v: item.label,
			ct: { fa: 'General', t: 'g' },
		}
	})

	const rowData = tableData.value.map((row) => {
		return props.tableConfig.columns.map((col) => {
			return {
				m: row[col.prop],
				v: row[col.prop],
				ct: { fa: 'General', t: 'g' },
			}
		})
	})

	const option = [
		{
			name: props.title,
			data: [headerColumn, ...rowData],
			config: {
				merge: {},
				borderInfo: {},
			},
		},
	]
	exportExcel(option, props.title||'导出工单信息')
}
onMounted(() => {
	getInitData()
})
</script>

<style scoped lang="scss">
.title-label {
	font-family: 'Microsoft YaHei Bold';
	font-weight: 700;
	font-size: 16px;
	text-align: left;
	color: #1c1c28;
	padding: 20px 0;
}
.left {
	text-align: left;
	position: relative;
	&::after {
		content: '';
		width: 100%;
		height: 0px;
		position: absolute;
		border-bottom: 1px solid #b5b5b5;
		top: 0;
		left: 0;
		transform: rotate(20deg) scale(1.2);
		z-index: 1;
	}
}

.right {
	text-align: right;
	padding-right: 10px;
}
</style>
